<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
	<title>Roma Italia - Your Guide to the Eternal City (Rome, Italy)</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	<meta name="description" content="A guide to the city of Roma (Rome) for vacation planning and city tours. Includes maps, destinations, videos, photos, audio tours, hotel information, and community advice.">

<!-- This style sheet imports the other style sheets -->
	<link rel="stylesheet" href="css/master.css" type="text/css" media="screen" charset="utf-8">
	<link rel="stylesheet" href="css/datepicker.css" type="text/css" media="screen" charset="utf-8">

<!-- The three lines below this comment are a conditional comment, 
which is read only by Internet Explorer. 
See http://www.positioniseverything.net/articles/cc-plus.html -->
	<!--[if IE]>
	 <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" charset="utf-8">
	<![endif]-->

<!-- jQuery, which is essentially JavaScript made easy for noobs like myself, 
is used for several interactive elements on this site. See http://jquery.com/ 
See also http://cameronmoll.com/archives/2008/03/extensible_css_interface_css_selectors_jquery/-->	
	<script src="js/jquery-1.3.2.js" type="text/javascript" charset="utf-8"></script>
	
<!-- The scripts for all of the jQuery plugins (and page specific code) are contained here -->
	<script src="js/jquery.plugins.js" type="text/javascript" charset="utf-8"></script>
	
<!-- Cufon is a text replacement technique that replaces normal fonts with
proprietary fonts on the fly using JavaScript. 
See http://wiki.github.com/sorccu/cufon/about -->
	<script src="js/cufon-yui.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/Museo_400.font.js" type="text/javascript" charset="utf-8"></script>

<!-- I've wrapped this Cufon replacement in a conditional comment 
because IE won't read the .otf font file we're using for @font-face.
If you'd like to see Cufon work in any browser other than IE, simply 
remove the conditional comment below and it will override @font-face. -->
	<!--[if IE]>
	<script type="text/javascript" charset="utf-8">
		Cufon.replace('h3,h4,#header h2,#header ul a');
	</script>   
	<![endif]-->
	
</head>
<body id="home">

<div id="content-wrapper">

<!-- Toggle on/off the grid used for this site simply by uncommenting this div -->
<!-- <div id="grid"><img src="img/grid.png" alt="" width="1090" height="1380"></div> -->

	<div id="header" class="clearfix">
	
		<ul class="clearfix">
			<li><a href="index.html">Home</a></li>
			<li><a href="#">Map of Rome</a></li>
			<li><a href="#">Destinations</a></li>
			<li><a href="#">Hotels</a></li>
			<li><a href="video.html">Videos</a></li>
			<li><a href="#">Photos</a></li>
			<li><a href="#">Voices Around the World</a></li>
			<li><a href="&#0109;&#97;&#105;&#108;&#116;&#111;&#58;&#98;o&#114;&#0101;&#0100;&#064;&#099;&#97;&#109;&#101;&#114;&#111;&#110;&#109;&#0111;&#108;&#0108;&#046;&#99;&#0111;&#109;?subject=Hey%20Cameron, about%20Roma%20Italia..."><em>Contact Us</em></a></li>
		</ul>
		
		<h1><a href="#">Roma Italia</a></h1>
		
		<h2>Your Guide to the Eternal City</h2>
		
		<form action="#" method="get" accept-charset="utf-8">
			<!-- This fieldset and legend (which is set to display:none in screen.css)
			are added to pass W3C validation -->
			<fieldset>
				<legend></legend>
				<label for="search-input">Search</label>
				<input type="text" id="search-input" name="search" value="" title="Search">
				<input type="image" name="" src="img/search-go.gif">
			</fieldset>
		</form>
			
	</div> <!-- end #header -->
	
	<div id="main">

		<div id="carousel">
			<div id="carousel-photos">
				<a href="#d"><img src="img/feature-colosseo.jpg" width="710" height="320" alt="Colosseo (Colosseum), ca. 75 AD"></a>
			</div>
			<a href="#d" id="prev">Previous</a>
			<a href="#d" id="next">Next</a>
		</div>

		<div id="main-featurette">
			<div id="featurette1">
				<a href="http://www.amazon.com/gp/product/8883706218?ie=UTF8&amp;tag=authenticbore-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=8883706218"><img src="img/moleskine.png" alt="Moleskine journal for Roma, Rome" width="125" height="111"></a>
				<h4><a href="http://www.amazon.com/gp/product/8883706218?ie=UTF8&amp;tag=authenticbore-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=8883706218">Roma Moleskine</a></h4>
				<p>
				"The ultimate traveler&rsquo;s journal." City maps, removable sheets, and a 96-page tabbed archive.</p>
				<ul>
					<li><a href="http://www.amazon.com/gp/product/8883706218?ie=UTF8&amp;tag=authenticbore-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=8883706218">Buy at Amazon.com</a></li>
				</ul>
			</div>
			<div id="featurette2">
				<a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAudiobook?id=278673543&amp;s=143441"><img src="img/earbud.png" alt="iPod earbuds" width="103" height="89"></a>
				<h4><a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAudiobook?id=278673543&amp;s=143441">Free Audio Tour of Rome</a></h4>
				<p>
				Download our free, award-winning audio tour of Rome’s top locations, from Vatican City to the Colosseum.</p>
				<ul>
					<li><a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAudiobook?id=278673543&amp;s=143441">iTunes</a></li>
					<li><a href="#">MP3 format</a></li>
				</ul>
			</div>
		</div>
		
		<div id="video">
			<h3>Video: Roma Italia</h3>
			<a href="video.html"><img src="img/bigthumb-video.jpg" alt="Frame from the video Roma Italia" width="310" height="178"></a>
		</div>
		
		<div id="interactive">
			<h3>Interactive: Map of Rome</h3>
			<a href="#"><img src="img/bigthumb-map.jpg" alt="Interactive map of Rome, powered by Google" width="310" height="178"></a>
		</div>
		
		<div id="popular">
			<h3>Popular Destinations</h3>
			<ul>
				<li><a href="#">The Colosseum</a></li>
				<li><a href="#">The Pantheon</a></li>
				<li><a href="#">St. Peter&rsquo;s Basilica</a></li>
				<li><a href="#">Vatican City</a></li>
				<li><a href="#">Sistine Chapel</a></li>
				<li><a href="#">Spanish Steps</a></li>
				<li><a href="#">Trevi Fountain</a></li>
				<li><a href="#">Roman Roads</a></li>
			</ul>
			<ul>
				<li><a href="#">Roman Forum</a></li>
				<li><a href="#">The Aventine</a></li>
				<li><a href="#">Circus Maximus</a></li>
				<li><a href="#">Arch of Constantine</a></li>
				<li><a href="#">The Capitol</a></li>
				<li><a href="#">The Vittore Emanuele II</a></li>
				<li><a href="#">Castel St. Angelo</a></li>
				<li><a href="#"><strong>View all (76)</strong></a></li>
			</ul>
		</div>
		
		<div id="voices">
			<h3>Voices Around the World</h3>
			
			<!-- If this site were real, these list items would probably be pulled in 
			dynamically via Ajax rather than having them all in the markup. -->
			
			<!-- The inline styles on each list item (li) are added to position the marker
			on the map. If this site were powered by a content management system (CMS),
			these locations would be added dynamically. -->
			<ul>
				<li class="l1" id="map1" style="top: 80px; left: 55px;"><a href="#"><em>&ldquo;I couldn&rsquo;t get enough of the gelato. The flavors and texture are way different than anything we have here.&rdquo;</em></a></li>
				<li class="l1" id="map2" style="top: 61px; left: 53px;"><a href="#"><em>&ldquo;Absolutely divine. Don&rsquo;t skip the Il Vittoriano. Its size alone is impressive. There&rsquo;s a stunning view from the top.&rdquo;</em></a></li>
				<li class="l2" id="map3" style="top: 51px; right: 145px;"><a href="#"><em>&ldquo;Rawk. What a place. I'll definitely be coming back next summer. Same hotel. Rome FTW.&rdquo;</em></a></li>
				<li class="l1" id="map4" style="top: 72px; right: 15px;"><a href="#"><em>&ldquo;There are no wrong turns in Rome. Every path is a new adventure. Ignore the map once in a while.&rdquo;</em></a></li>
				<li class="l2" id="map5" style="top: 132px; right: 12px;"><a href="#"><em>&ldquo;I&rsquo;ve seen the Colosseum in photos, but it's SO much more stunning in person. Set aside an entire day to view it.&rdquo;</em></a></li>
				<li class="l2" id="map6" style="top: 50px; right: 131px;"><a href="#"><em>&ldquo;L&rsquo;Archetto di Cavour on Via Cavour is one of the best restaurants in downtown Rome. Anything on the menu.&rdquo;</em></a></li>
				<li class="l2" id="map7" style="top: 60px; right: 30px;"><a href="#"><em>&ldquo;Visit the Trevi fountain at night. Most of the tourists clear out around 10pm. Beautiful at night.&rdquo;</em></a></li>
			</ul>
			<p>
			<a href="#">View all</a> <a href="#">Share</a> <a href="http://twitter.com/roma_italia"><strong>Follow @roma_italia</strong></a> </p>
		</div>
		
	</div> <!-- end #main -->

	<div id="secondary">
		<div id="secondary-feature">
			<p>
			&ldquo;As long as the Colossus stands, so shall Rome; when the Colossus falls, Rome shall fall; when Rome falls, so falls the world.&rdquo; &ndash;The Venerable Bede, ca. 672–735</p>
		</div>
		<div id="secondary-featurette">
			<h4>Search for Hotels in Rome</h4>
			<form action="">
				<fieldset>
					<legend>Select a date</legend>
					<label for="checkin">Check in:</label>
					<input type="text" id="checkin" value="dd/mm/yy" class="calendarRange">
					<label for="checkout">Check out:</label>
					<input type="text" id="checkout" value="dd/mm/yy" class="calendarRange">
				</fieldset>

				<!-- The following div added for W3C validation. It's empty, isn't used 
				for anything other than validation. Alternately, a fieldset with empty legend
				could be added as in the search form in the header.-->
				<div> 
					<select>
						<option label="I&rsquo;d like to stay near&hellip;" value="">I&rsquo;d like to stay near&hellip;</option>
						<option label="Everything" value="">Everything</option>
						<optgroup label="Transportation">
							<option label="Termini (train, bus, &amp; taxi station)" value="">Termini (train, bus, &amp; taxi station)</option>
							<option label="Rome Fiumicino Airport" value="">Rome Fiumicino Airport</option>
						</optgroup>
						<optgroup label="Location">
							<option label="Central Rome" value="">Central Rome</option>
							<option label="Vatican City, St Peter's Basilica, &amp; Sistine Chapel" value="">Vatican City, St Peter's Basilica, &amp; Sistine Chapel</option>
							<option label="The Colosseum &amp; Roman Forum" value="">The Colosseum &amp; Roman Forum</option>
							<option label="Spanish Steps" value="">Spanish Steps</option>
							<option label="Trevi Fountain" value="">Trevi Fountain</option>
							<option label="The Pantheon" value="">The Pantheon</option>
							<option label="The Capitol &amp; The Vittore Emanuele II" value="">The Capitol &amp; The Vittore Emanuele II</option>
							<option label="The Aventine" value="">The Aventine</option>
							<option label="Circus Maximus" value="">Circus Maximus</option>
							<option label="Castel St. Angelo" value="">Castel St. Angelo</option>
						</optgroup>
					</select>
					<input type="image" name="" src="img/search-sm.png">
				</div>
			</form>
		</div>
		<div id="photos" class="clearfix">
			<h3>Photo Galleries</h3>
			<a href="#"><img src="img/thumb-sistine.jpg" alt="Thumbnail photo of the Sistine Chapel" width="93" height="93"></a>
			<a href="#"><img src="img/thumb-vatican.jpg" alt="Thumbnail photo of St Peter's Square" width="93" height="93"></a>
			<a href="#"><img src="img/thumb-arch.jpg" alt="Thumbnail photo of the Arch of Constantine" width="93" height="93"></a>
			<a href="#"><img src="img/thumb-trajan.jpg" alt="Thumbnail photo of Trajan's Column" width="93" height="93"></a>
			<a href="#"><img src="img/thumb-soldier.jpg" alt="Thumbnail photo of Roman soldier" width="93" height="93"></a>
			<a href="#"><img src="img/thumb-focaccia.jpg" alt="Thumbnail photo of the Italian food" width="93" height="93"></a>
		</div>
		
	</div>	<!-- end #secondary -->

	<div id="footer">	
		<p id="footer-links">
		<a href="#">Home</a> <a href="#">Map of Rome</a> <a href="#">Destinations</a> <a href="#">Hotels</a> <a href="video.html">Videos</a> <a href="#">Photos</a> <a href="#">Voices Around the World</a> <a href="&#0109;&#97;&#105;&#108;&#116;&#111;&#58;&#98;o&#114;&#0101;&#0100;&#064;&#099;&#97;&#109;&#101;&#114;&#111;&#110;&#109;&#0111;&#108;&#0108;&#046;&#99;&#0111;&#109;?subject=Hey%20Cameron, about%20Roma%20Italia...">Contact Us</a><p>
		<p>
		&copy; 2009 <a href="http://cameronmoll.com/">Cameron Moll</a>. All rights reserved.</p>
		<p>
		This is a fictitious website created strictly for educational purposes and may not be reproduced without permission.</p>
		<p>
		<strong>Buy the book at Amazon: <a href="http://bit.ly/cssmastery"><em>CSS Mastery</em></a></strong></p>
		<div id="cameronmoll"><a href="http://cameronmoll.com/"><img src="img/cameronmoll.png" alt="Cameron Moll" width="124" height="23"></a></div>
	</div>

</div> <!-- end #content-wrapper -->

<!-- This script is specifically for IE (curses!). It should appear before the 
closing body tag but before any external scripts such as Google Analytics -->	
<script type="text/javascript" charset="utf-8"> Cufon.now(); </script>	
</body>
</html>